<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('批量导入')"/>
</head>
<body class="pear-container">
<form class="layui-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item" align="center">
                <input class="layui-btn center" align="center" style="display: none;width: 400px" id="excelDisplay">
            </div>
            <div class="layui-form-item">
                <h4 style="font-size: medium">1.直接上传</h4>
                <h4 style="font-size: medium;color: lightslategray">-支持文件类型：xls，xlsx</h4>
                <h4 style="font-size: medium;color: lightslategray">-不符合规则的任务不予导入：xls，xlsx</h4><br>
                <div class="layui-upload" align="center">
                    <button type="button" class="pear-btn pear-btn-primary pear-btn-md" id="excelSelect-btn"
                            lay-event="excelSelect-btn">选择文件</button>

                    <button type="button" class="pear-btn-primary  pear-btn-md" id="excelSelect-upload" lay-event="excelSelect-upload">
                        开始导入
                    </button>

                </div>
            </div>
            <div class="layui-form-item">
                <h4 style="font-size: medium">2.下载模板并填写后上传</h4>
                <h4 style="font-size: medium;color: lightslategray">-请按照模板的填写后再上传</h4><br>
                <div class="layui-upload" align="center">
                <button type="button" class="pear-btn pear-btn-primary pear-btn-md" id="download-btn"
                        lay-event="excelSelect-btn">模板下载</button>
                </div>
            </div>
        </div>
    </div>
</form>

<th:block th:include="include :: footer"/>
<script>

    layui.use(['form', 'laydate', 'upload', 'jquery', 'table', 'layedit'], function () {

        let upload = layui.upload;

        //Excel文件上传（type=1）
        upload.render({
            elem: '#excelSelect-btn'
            , url: "/FileUploadController/excelUpload"
            , auto: false
            , bindAction: '#excelSelect-upload'
            //,multiple: true
            , accept: 'file'
            ,exts: 'xlsx|xls'//只允许上传excel文件
            , choose: function (obj) {
                // var file = this.files = obj.pushFile();
                obj.preview(function (index, file, result) {
                    document.getElementById("excelDisplay").style.display = "inline";
                    var xx = document.getElementById("excelDisplay").value = file.name + '【' + (file.size / 1024 / 1024).toFixed(2) + 'MB' + '】';
                    // $("#demo1").attr('style','width:300px;heigth:400px');
                    // $("#demo1").attr('src',result);

                })
            }
            , done: function (res) {
                if (res.code == 0) {

                    return layer.msg('上传失败');
                } else {
                    return layer.msg('上传成功');
                }
            }
        });

        //查重报告文件下载，调用后端接口
        $("#download-btn").click(function() {
            var path = "C:/_Publish/社科联/导入模板/导入模板.xlsx";
            var index = path.lastIndexOf("/");
            var fileName = path.substring(index+1,path.length);
            window.open("/FileUploadController/downloadTwo?fileName=" + encodeURI(fileName) + "&downUrl=" + path);
        })
    })

</script>
</body>
</html>